<template>
  <div class="clue-detail-container">
    <!-- 顶部卡片信息 -->
    <el-card class="clue-card">
      <div class="clue-title">{{ clueInfo.name }}/{{ clueInfo.clueId }}</div>
      <el-row :gutter="20" class="clue-info-row info-row-gap">
        <el-col :span="6">线索创建时间<br /><span class="clue-info">{{ clueInfo.createTime }}</span></el-col>
        <el-col :span="6">客户手机号<br /><span class="clue-info">{{ clueInfo.phone }}</span></el-col>
        <el-col :span="6">渠道来源<br /><span class="clue-info">{{ clueInfo.channelName }}</span></el-col>
        <el-col :span="6">线索归属时间<br /><span class="clue-info">{{ clueInfo.ownTime }}</span></el-col>
      </el-row>
      <el-row :gutter="20" class="clue-info-row info-row-gap">
        <el-col :span="6">线索分配者<br /><span class="clue-info">{{ clueInfo.assigner }}</span></el-col>
        <el-col :span="6">线索归属人<br /><span class="clue-info">{{ clueInfo.owner }}</span></el-col>
        <el-col :span="6">所属促销活动信息<br /><span class="clue-info">{{ clueInfo.activityInfo }}</span></el-col>
        <el-col :span="6">
          <el-tag v-if="clueInfo.status === 0" type="danger">无效线索</el-tag>
          <el-tag v-else type="info">转为商机</el-tag>
        </el-col>
      </el-row>
    </el-card>

    <!-- 跟进表单 -->
    <el-card class="clue-follow-card">
      <div class="clue-follow-title">线索跟进</div>
      <el-form :model="followForm" label-width="100px" class="follow-form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="客户姓名">
              <el-input v-model="followForm.name" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别">
              <el-select v-model="followForm.gender" disabled>
                <el-option label="男" :value="0" />
                <el-option label="女" :value="1" />
                <el-option label="未知" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄">
              <el-input-number v-model="followForm.age" :min="0" :max="120" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="客户微信号">
              <el-input v-model="followForm.weixin" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户QQ号码">
              <el-input v-model="followForm.qq" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户手机号">
              <el-input v-model="followForm.phone" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="客户意向等级">
              <el-radio-group v-model="followForm.level" disabled>
                <el-radio label="近期报名">近期报名</el-radio>
                <el-radio label="打算报名">打算报名</el-radio>
                <el-radio label="考虑中">考虑中</el-radio>
                <el-radio label="了解一下">了解一下</el-radio>
                <el-radio label="打酱油">打酱油</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="客户意向类型">
              <el-checkbox-group v-model="followForm.types" disabled>
                <el-checkbox label="舞蹈类">舞蹈类</el-checkbox>
                <el-checkbox label="游泳类">游泳类</el-checkbox>
                <el-checkbox label="拳击类">拳击类</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="跟进记录">
              <el-input type="textarea" v-model="followForm.record" placeholder="请输入内容" rows="4" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="下次跟进时间">
              <el-date-picker v-model="followForm.nextTime" type="datetime" placeholder="请选择时间" style="width: 100%;" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right;">
            <el-button type="primary" disabled>提交</el-button>
            <el-button @click="goBack">返回</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()
const clueId = route.params.id || route.params[1]
const clueInfo = ref({})
const followForm = ref({
  name: '',
  gender: 2,
  age: '',
  weixin: '',
  qq: '',
  phone: '',
  level: '',
  types: [],
  record: '',
  nextTime: ''
})

function goBack() {
  router.back()
}

onMounted(() => {
  // 获取线索详情
  request({ url: `/tienchin/clue/${clueId}`, method: 'get' }).then(res => {
    clueInfo.value = res.data || {}
  })
  // 获取跟进记录
  request({ url: `/tienchin/clue/${clueId}`, method: 'get' }).then(res => {
    const data = res.data || {}
    Object.assign(followForm.value, data || {})
  })
})
</script>
<style lang="scss" scoped>
.clue-detail-container {
  padding: 20px 40px;
  background: #f5f7fa;
}
.clue-card {
  margin-bottom: 20px;
}
.clue-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.clue-info-row {
  margin-bottom: 8px;
}
.info-row-gap > .el-col {
  margin-bottom: 8px;
}
.clue-info {
  color: #606266;
  font-size: 14px;
}
.clue-follow-card {
  margin-bottom: 20px;
}
.clue-follow-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.follow-form {
  background: #fff;
  padding: 20px 10px 10px 10px;
  border-radius: 6px;
}
</style> 